import React from 'react';
import {View, Text, StyleSheet, Dimensions} from 'react-native';
import {Bar} from 'react-native-progress';
import PropTypes from 'prop-types';
import {getRealSize} from '../utils';
import ThemeStyles from '../styles';

export default class ProgressBar extends React.Component {
  static propTypes = {
    title: PropTypes.string,
    current: PropTypes.string,
    total: PropTypes.string,
    progress: PropTypes.number,
    width: PropTypes.number,
  };
  static defaultProps = {
    content: '',
    current: 0,
    total: 100,
    progress: 100 / 0,
    width: Dimensions.get('screen').width,
  };

  render() {
    const {title, current, total, width, progress} = this.props;
    return (
      <View style={[Styles.container, {width}]}>
        <View style={Styles.content}>
          <Text style={Styles.title}>{title}</Text>
          <View style={Styles.data}>
            <Text style={Styles.data1}>{current}</Text>
            <Text style={Styles.data2}>/{total}</Text>
          </View>
        </View>
        <Bar progress={progress} width={width - 30} />
      </View>
    );
  }
}

const Styles = StyleSheet.create({
  container: {
    paddingHorizontal: getRealSize(15),
    paddingTop: getRealSize(18),
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  title: {
    flex: 1,
    fontSize: getRealSize(12),
    fontWeight: '400',
    color: '#757575',
  },
  data: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
    paddingVertical: getRealSize(8),
    flex: 1,
  },
  data1: {
    fontSize: getRealSize(12),
    color: ThemeStyles.Color.primary.color,
    textAlign: 'right',
  },
  data2: {
    fontSize: getRealSize(12),
    color: '#757575',
  },
});
